<script setup lang="ts">
import {useNoticeStore} from "@/stores/notice";
import {storeToRefs} from "pinia";
import {useFullscreen} from "@vueuse/core";
import {Delete, Edit} from "@element-plus/icons-vue";

const noticeStore = useNoticeStore();
const {
  isLoading,
  pageSize,
  currentPage,
  totalCount,
  currentTableData,
  addFormDialogRef,
  addFormModelRef,
  editFormDialogRef,
  editFormModelRef,
  commonFormModel,
  commonFormRules,
} = storeToRefs(noticeStore)
const {
  getNoticeList,
  handleClosedDialog,
  handleDeleteNotice,
  handlePageChange,
  openAddFormDialog,
  openEditFormDialog,
  handleAddNoticeSubmit,
  handleEditNoticeSubmit,
} = useNoticeStore()


onMounted(() => getNoticeList())
// 全屏
const isFullScreen = useFullscreen();
const tableMaxHeight = computed(() => isFullScreen.isFullscreen.value ? '530' : '410')

</script>

<template>
  <el-card shadow="never" style="border: none">

    <template #header>
      <el-button type="primary" @click="openAddFormDialog">新增</el-button>
    </template>

    <template #default>
      <el-table :data="currentTableData" v-loading="isLoading" :max-height="tableMaxHeight" transition-max-height
                transition-duration-1000>
        <el-table-column type="expand">
          <template #default="scope">
            <el-descriptions direction="vertical" border mr-3>
              <el-descriptions-item label="公告内容" width="85%">{{ scope.row.description }}</el-descriptions-item>
              <el-descriptions-item label="更新时间" width="15%" align="center">
                {{ scope.row.update_time }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" sortable width="150"/>
        <el-table-column prop="title" label="公告标题" align="center" width="240"/>
        <el-table-column prop="publish_time" label="发布时间" sortable align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button :icon="Edit" border @click="openEditFormDialog(scope.row)"></el-button>
            <el-button :icon="Delete" type="danger" @click="handleDeleteNotice(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="totalCount" :current-page="currentPage"
                     :page-size="pageSize" @update:currentPage="handlePageChange" :hide-on-single-page="false"
                     mt-5 flex justify-center/>

      <!--新增-->
      <FormDialog ref="addFormDialogRef" title="新增公告" @submit="handleAddNoticeSubmit(addFormModelRef)"
                  @closed="handleClosedDialog(addFormModelRef)">

        <el-form ref="addFormModelRef" :model="commonFormModel" :rules="commonFormRules" mt-3>
          <el-form-item label="公告标题" prop="title">
            <el-input v-model.trim="commonFormModel.title" placeholder="请输入公告标题" clearable/>
          </el-form-item>
          <el-form-item label="公告内容" prop="description">
            <el-input v-model.trim="commonFormModel.description" type="textarea" :rows="5"
                      placeholder="请输入公告内容"/>
          </el-form-item>
          <el-form-item label="发布时间" prop="publish_time">
            <el-date-picker v-model.trim="commonFormModel.publish_time" type="datetime" formart="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss" placeholder="请输入发布时间"/>
          </el-form-item>
        </el-form>
      </FormDialog>

      <!--编辑-->
      <FormDialog ref="editFormDialogRef" title="编辑公告"
                  @submit="handleEditNoticeSubmit(editFormModelRef, commonFormModel)"
                  @closed="handleClosedDialog(editFormModelRef)">

        <el-form ref="editFormModelRef" :model="commonFormModel" :rules="commonFormRules" mt-3>
          <el-form-item label="公告标题" prop="title">
            <el-input v-model.trim="commonFormModel.title" placeholder="请输入公告标题" clearable/>
          </el-form-item>
          <el-form-item label="公告内容" prop="description">
            <el-input v-model.trim="commonFormModel.description" type="textarea" :rows="5"
                      placeholder="请输入公告内容"/>
          </el-form-item>
          <el-form-item label="发布时间" prop="publish_time">
            <el-date-picker v-model.trim="commonFormModel.publish_time" type="datetime" formart="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss" placeholder="请输入发布时间"/>
          </el-form-item>
        </el-form>
      </FormDialog>
    </template>
  </el-card>
</template>

<style scoped>

</style>